<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
        theme="light"
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
        :style="{ height: '100%', borderRight: 0 }"
        @select="handlerSelect"
      >
        <a-sub-menu v-for="item in cates" :key="item.id">
          <template #title>
            <span>
              <user-outlined />
              {{ item.name }}
            </span>
          </template>
          <a-menu-item :key="childItem.id" v-for="childItem in item.children">{{
            childItem.name
          }}</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>

    <!-- 路由的 -->
    <a-layout-content>
      <!-- <keep-alive>
        <router-view></router-view>
      </keep-alive> -->
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { getCategoryAllList } from "@/api/cate";
import { onMounted, ref, reactive } from "vue";
import { toTree } from "@/util/toTree";
import { useRouter } from "vue-router";

let selectedKeys = ref<string[]>([]);
let openKeys = ref<string[]>([]);
let router = useRouter();

interface Cate {
  id: number;
  name: string;
  parent: number;
  sort: number;
  children?: Cate[];
}
const cates = reactive<Cate[]>([
  // {
  //  id: number;
  // name: string;
  // parent: number;
  // sort: number;
  // children?: Cate[];
  // },
]);

const handlerSelect = (item: any) => {
  router.push(`/booksMessage/${item.key}`);
};

onMounted(() => {
  getCategoryAllList().then((res) => {
    // 分类数据
    cates.length = 0;
    let cateTree = toTree(res.data.data);
    cates.push(...cateTree);
  });
});
</script>

<style scope>
.ant-layout-content {
  background-color: white;
  padding: 24px;
}
.ant-layout {
  height: 100%;
}
</style>
